<template>
  <div class="search-element">
    <el-input
      v-model="searchText"
      :maxlength="200"
      placeholder="请搜索环卫要素"
      suffix-icon="el-icon-search"
      class="search-box"
      clearable
      :readonly="!searchListVisible"
      @focus="showSearchBoxType"
      @input="doSearch"
    />
    <div class="search-box-type" v-show="searchBoxTypeVisible">
      <i
        class="el-icon-caret-top"
        @click="hideSearchBoxType"
        style="
          position: absolute;
          bottom: 2px;
          left: 50%;
          color: #000000;
          opacity: 0.4;
          cursor: pointer;
          font-size: 16px;
        "
      ></i>
      <div class="item" @click="showSearchList(1)">
        <i
          class="iconfont el-icon-car"
          style="color: #087ae6; background: rgba(8, 122, 230, 0.2)"
        ></i>
        <p>车辆</p>
      </div>
      <div class="item" @click="showSearchList(2)">
        <i
          class="el-icon-user-solid"
          style="color: #f2993a; background: rgba(242, 153, 58, 0.2)"
        ></i>
        <p>人员</p>
      </div>
      <div class="item" @click="showSearchList(3)">
        <i
          class="el-icon-delete-solid"
          style="color: #6ec38d; background: rgba(136, 203, 160, 0.2)"
        ></i>
        <p>垃圾桶</p>
      </div>
      <div class="item" @click="showSearchList(4)">
        <i
          class="iconfont el-icon-polygon"
          style="color: #6881e6; background: rgba(104, 129, 230, 0.2)"
        ></i>
        <p>网格</p>
      </div>

      <!-- <div class="item" @click="showSearchList(0)">
        <i
          class="el-icon-menu"
          style="color: #087ae6; background: rgba(8, 122, 230, 0.2)"
        ></i>
        <p>全部</p>
      </div> -->
    </div>
    <el-card class="search-result" v-if="searchListVisible">
      <div slot="header">
        <span>{{ typeName }}</span>
        <el-button
          style="float: right; padding: 3px 0; color: #fff"
          type="text"
          icon="el-icon-arrow-left"
          @click="backSearchTypeBox"
          >返回</el-button
        >
      </div>
      <div style="display: flex">
        <el-select
          v-if="elementType < 4"
          v-model="queryParams.onlineStatus"
          placeholder="状态"
          clearable
          size="small"
          style="width: 120px"
          @change="resetList"
        >
          <el-option label="在线" :value="1" />
          <el-option label="离线" :value="2" />
        </el-select>
        <el-select
          v-if="elementType == 1"
          v-model="queryParams.carType"
          placeholder="请选择车辆类型"
          clearable
          size="small"
          style="width: 200px"
          @change="resetList"
        >
          <el-option
            v-for="dict in dict.type.base_car_type"
            :key="'carType' + dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
        <el-select
          v-else-if="elementType == 2"
          v-model="queryParams.personType"
          placeholder="请选择人员类型"
          size="small"
          style="width: 100%"
          clearable
          @change="resetList"
        >
          <el-option
            v-for="dict in dict.type.base_person_type"
            :key="'personType' + dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
        <el-select
          v-else-if="elementType == 3"
          v-model="queryParams.facilityType"
          placeholder="请选择设施类型"
          clearable
          size="small"
          style="width: 100%"
          @change="resetList"
        >
          <el-option
            v-for="dict in dict.type.base_facility_type"
            :key="'facilityType' + dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
        <el-select
          v-else-if="elementType == 4"
          v-model="queryParams.fenceType"
          placeholder="请选择围栏类型"
          clearable
          size="small"
          style="width: 100%"
          @change="resetList"
        >
          <el-option
            v-for="dict in dict.type.base_fence_type"
            :key="'fenceType' + dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </div>
      <div class="infinite-list-wrapper" style="overflow: auto">
        <div
          class="infinite-list search-list"
          v-infinite-scroll="getList"
          :infinite-scroll-disabled="disabled"
          infinite-scroll-immediate="false"
        >
          <div
            v-for="(item, index) in elementList"
            class="infinite-list-item item"
            :key="index"
            @click="showOnMap(item.deviceId, item.fenceObj)"
          >
            <div>
              <p class="item-name">{{ item.name }}</p>
              <p>{{ item.typeName }}</p>
            </div>
            <div style="line-height: 40px" v-if="item.deviceId">
              <i
                class="iconfont el-icon-guiji"
                style="color: #25bb96; font-size: 20px"
              ></i
              ><span
                :class="item.onlineStatus == '在线' ? 'online' : 'offline'"
                >{{ item.onlineStatus }}</span
              >
              <span
                :class="item.inWorkTime == 1 ? 'onwork' : 'offwork'"
                style="margin-left: 5px"
                >{{ item.inWorkTime == 1 ? "当班" : "未当班" }}</span
              >
            </div>
          </div>
        </div>
        <p
          v-if="loading"
          style="
            margin: 10px 0;
            text-align: center;
            color: #999;
            font-size: 14px;
          "
        >
          加载中...
        </p>
        <p
          v-if="noMore && !loading"
          style="
            margin: 10px 0;
            text-align: center;
            color: #999;
            font-size: 14px;
          "
        >
          没有更多了
        </p>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  homeRealtime,
  homeCar,
  homePerson,
  homeFac,
  homeFence,
} from "@/api/lsd/lsd";

export default {
  name: "searchElement",
  dicts: [
    "base_car_type",
    "base_person_type",
    "base_facility_type",
    "base_fence_type",
  ],

  components: {},
  data() {
    return {
      searchText: "",
      searchBoxTypeVisible: false,
      searchListVisible: false,

      elementList: [],
      elementType: 1,
      queryParams: {
        carNum: null,
        personName: null,
        facilityName: null,
        fenceName: null,
        carType: null,
        personType: null,
        facilityType: null,
        fenceType: null,
        onlineStatus: null,
      },
      loading: false,

      typeName: "",
    };
  },
  computed: {
    noMore() {
      return true;
    },
    disabled() {
      return this.loading || this.noMore;
    },
  },
  watch: {
    // searchListVisible(val) {
    //   if (!val) {
    //     //0代表显示全部
    //     this.$emit("mapShowMarkerType", 0);
    //   }
    // },
  },
  created() {},
  methods: {
    showSearchBoxType() {
      if (this.searchListVisible) {
        this.searchBoxTypeVisible = false;
      } else {
        this.searchBoxTypeVisible = true;
      }
    },
    hideSearchBoxType() {
      this.searchBoxTypeVisible = false;
    },

    showSearchList(index) {
      this.elementType = index;
      if (index == 1) {
        this.typeName = "车辆";
      } else if (index == 2) {
        this.typeName = "人员";
      } else if (index == 3) {
        this.typeName = "垃圾桶";
      } else if (index == 4) {
        this.typeName = "网格";
      }

      this.resetList();
      this.searchBoxTypeVisible = false;
      this.searchListVisible = true;
    },
    doSearch() {
      if (this.searchListVisible) {
        this.resetList();
      }
    },
    resetList() {
      this.elementList = [];
      this.getList();
    },
    formatCar(data) {
      data.map((v) => {
        this.elementList.push({
          id: v.carId,
          typeName: this.selectDictLabel(
            this.dict.type.base_car_type,
            v.carType
          ),
          location: v.carLocation,
          dataTime: v.dataTime,
          devState: v.devState,
          deviceId: v.deviceId,
          devicePhoneNum: v.devicePhoneNum,
          pointType: 1, //代表车
          deviceType: v.deviceType,
          lat: v.lat,
          lng: v.lng,
          icon:
            v.onlineStatus == 1
              ? v.onlineIcon
              : v.onlineStatus == 2
              ? v.offlineIcon
              : "",
          onlineStatus:
            v.onlineStatus == 1
              ? "在线"
              : v.onlineStatus == 2
              ? "离线"
              : "未上线",
          name: v.carNum,
          phone: "",

          onlineIcon: v.onlineIcon,
          offlineIcon: v.offlineIcon,
          carType: v.carType,
          fenceObj: null,
          inWorkTime: v.inWorkTime,
        });
      });
    },
    formatPerson(data) {
      data.map((v) => {
        this.elementList.push({
          id: v.personId,
          name: v.personName,
          typeName: this.selectDictLabel(
            this.dict.type.base_person_type,
            v.personType
          ),
          location: v.carLocation,
          dataTime: v.dataTime,
          devState: v.devState,
          deviceId: v.deviceId,
          devicePhoneNum: v.devicePhoneNum,
          pointType: 2, //代表人员
          deviceType: v.deviceType,
          lat: v.lat,
          lng: v.lng,
          icon:
            v.onlineStatus == 1
              ? v.onlineIcon
              : v.onlineStatus == 2
              ? v.offlineIcon
              : "",
          onlineStatus:
            v.onlineStatus == 1
              ? "在线"
              : v.onlineStatus == 2
              ? "离线"
              : "未上线",
          phone: v.phoneNum,

          onlineIcon: v.onlineIcon,
          offlineIcon: v.offlineIcon,
          personType: v.personType,
          fenceObj: null,
          inWorkTime: v.inWorkTime,
        });
      });
    },
    formatFacility(data) {
      data.map((v) => {
        let icon = "";
        if (v.onlineStatus == 1) {
          icon = v.onlineIcon;
          if (v.overflow == 1) {
            icon = v.alarmIcon;
          }
          // if (v.loadPercent <= 0.7) {
          //   icon = v.onlineIcon;
          // } else if (v.loadPercent <= 0.89) {
          //   icon = v.prewarnIcon;
          // } else {
          //   icon = v.alarmIcon;
          // }
        } else if (v.onlineStatus == 2) {
          icon = v.offlineIcon;
        } else {
          icon = "";
        }
        this.elementList.push({
          id: v.facilityId,
          name: v.facilityName,
          typeName: this.selectDictLabel(
            this.dict.type.base_facility_type,
            v.facilityType
          ),
          location: v.address,
          dataTime: v.dataTime,
          devState: "",
          deviceId: v.deviceId,
          deviceName: v.deviceName,
          pointType: 3, //代表垃圾桶
          deviceType: "",
          lat: v.lat,
          lng: v.lng,
          onlineStatus:
            v.onlineStatus == 1
              ? "在线"
              : v.onlineStatus == 2
              ? "离线"
              : "未上线",
          name: v.facilityName,
          phone: "",
          facilityType: v.facilityType,
          icon: icon,
          overflow: v.overflow == 1 ? "满" : "未满",
          // loadPercent: v.loadPercent ? v.loadPercent * 100 : 0,
          facilitySpecifications: parseInt(v.facilitySpecifications),
          distance: v.distance,
          batteryQuantityStatus:
            v.batteryQuantityStatus == 1 ? "低电量" : "电量正常",
          fire: v.fire == 1 ? "火灾告警" : "无火警",
          fenceObj: null,
        });
      });
    },

    getList() {
      this.loading = true;

      if (this.elementType == 1) {
        this.queryParams.carNum = this.searchText;
        //代表车
        homeCar(this.queryParams).then((response) => {
          this.formatCar(response.data);
          this.loading = false;
          this.$emit("refreshPoints", this.elementList);
        });
      } else if (this.elementType == 2) {
        this.queryParams.personName = this.searchText;

        //代表人员
        homePerson(this.queryParams).then((response) => {
          this.formatPerson(response.data);
          this.loading = false;
          this.$emit("refreshPoints", this.elementList);
        });
      } else if (this.elementType == 3) {
        this.queryParams.facilityName = this.searchText;

        //代表垃圾桶
        homeFac(this.queryParams).then((response) => {
          this.formatFacility(response.data);
          this.loading = false;
          this.$emit("refreshPoints", this.elementList);
        });
      } else if (this.elementType == 4) {
        this.queryParams.fenceName = this.searchText;

        //代表网格
        homeFence(this.queryParams).then((response) => {
          response.data.map((v) => {
            this.elementList.push({
              deviceId: "",
              id: v.fenceId,
              name: v.fenceName,
              typeName: this.selectDictLabel(
                this.dict.type.base_fence_type,
                v.fenceType
              ),
              deviceName: "",
              onlineStatus: "",
              fenceObj: {
                fenceName: v.fenceName,
                fenceId: v.fenceId,
                latlng: v.latlng,
                fenceType: v.fenceType,
                radius: v.radius,
                bgColor: v.bgColor,
              },
            });
          });

          this.loading = false;
        });
      } else if ((this.elementType = "all")) {
        homeRealtime({}).then((response) => {
          this.formatCar(response.data.car);
          this.formatPerson(response.data.person);
          this.formatFacility(response.data.fac);
          this.$emit("refreshPoints", this.elementList);
        });
      }
    },
    backSearchTypeBox() {
      this.searchBoxTypeVisible = true;
      this.searchListVisible = false;
      this.searchText = "";
      this.elementType = "all";
      this.elementList = [];
      this.getList();
    },
    showOnMap(deviceId, fenceObj) {
      this.$emit("showOnMap", deviceId, fenceObj, this.elementType);
    },
  },
  mounted() {
    this.backSearchTypeBox();
  },
};
</script>

<style lang="scss">
.search-element {
  position: absolute;
  top: 70px;
  left: 2px;
  z-index: 999;

  .search-box {
    width: 300px;

    &.el-input {
      &:hover {
        span.el-input__suffix {
          .el-icon-search {
            visibility: hidden;
            transition: all 0s;
          }
        }
      }

      input {
        color: #fff;
      }
    }

    .el-input__suffix {
      color: #50e3c2;
    }

    .el-input__inner {
      background: rgba(0, 0, 0, 0.7);
    }
  }

  .search-box-type {
    position: absolute;
    z-index: 120;
    display: flex;
    flex-wrap: wrap;
    top: 40px;
    left: 4px;
    width: 300px;
    border-radius: 6px 6px 12px 12px;
    background: #fff;
    // background: rgba(12, 38, 48, 0.9);
    box-shadow: 0px 2px 8px 0px rgba(51, 51, 51, 0.15);
    padding-bottom: 16px;

    // color: #fff;
    .item {
      width: 25%;
      text-align: center;
      padding-top: 16px;

      i {
        display: inline-block;
        width: 48px;
        height: 48px;
        line-height: 48px;
        border-radius: 50%;
        font-size: 24px;
        cursor: pointer;
      }

      p {
        margin: 0;
        margin-top: 8px;
        font-size: 14px;
      }
    }
  }

  .search-result {
    z-index: 9999;

    .el-card__header {
      background: #515457;
      padding: 10px;
      color: #fff;
    }

    .el-card__body {
      padding: 5px;
    }

    .infinite-list-wrapper {
      height: 600px;
      overflow: auto;

      .search-list {
        .item {
          position: relative;
          border-bottom: 1px solid rgba(0, 0, 0, 0.06);
          padding: 6px 16px;
          // padding-right: 24px;
          cursor: pointer;
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;

          & > div {
            .item-name {
              height: 24px;
              line-height: 24px;
              color: rgba(0, 0, 0, 0.85);
              font-size: 14px;
              font-weight: 600;
            }

            p {
              font-size: 14px;
              height: 20px;
              line-height: 20px;
              color: rgba(0, 0, 0, 0.45);
              margin: 0;
            }

            .offline {
              color: rgba(0, 0, 0, 0.45);
              border: 1px solid rgba(0, 0, 0, 0.45);
              background: rgba(0, 0, 0, 0.1);
              font-size: 12px;
              padding: 2px 6px;
              text-align: center;
            }

            .online {
              color: #52c41a;
              border: 1px solid #52c41a;
              background: rgba(82, 196, 26, 0.1);
              font-size: 12px;
              padding: 2px 6px;
              text-align: center;
            }

            .offwork {
              color: rgba(0, 0, 0, 0.45);
              border: 1px solid rgba(0, 0, 0, 0.45);
              background: rgba(0, 0, 0, 0.1);
              font-size: 12px;
              padding: 2px 6px;
              text-align: center;
            }

            .onwork {
              color: #1f84eb;
              border: 1px solid #1f84eb;
              background: rgba(31, 132, 235, 0.1);
              font-size: 12px;
              padding: 2px 6px;
              text-align: center;
            }
          }
        }
      }
    }
  }
}
</style>
